<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Blog － A Single Page App demo using Senna.js</title>

  <!-- Demo -->
  <link rel="shortcut icon" href="http://sennajs.com/images/favicon.ico">
  <link rel="stylesheet" href="../../bower_components/pure/pure-min.css">
  <link rel="stylesheet" href="../../bower_components/pure/grids-responsive-min.css">
  <link rel="stylesheet" href="css/blog.css"></head>
  <link rel="stylesheet" href="css/spa.css"></head>

  <!-- Using Senna's optional style -->
  <link rel="stylesheet" href="../../build/senna.css">

  <!-- Including Senna -->
  <script src="../../build/globals/senna-debug.js"></script>

  <!-- Initializing Senna -->
  <script src="js/spa.js"></script>
<body>
  <div class="senna-loading-bar"></div>

  <div id="layout" class="pure-g">
    <div class="sidebar pure-u-1 pure-u-md-1-4">
      <div class="header">
        <h1 class="brand-title">Blog</h1>
        <h2 class="brand-tagline">A Single Page App<br>demo using Senna.js</h2>
      </div>
    </div>

    <div class="content pure-u-1 pure-u-md-3-4">
      <div>
        <!-- A wrapper for all the blog posts -->
        <div id="posts">
          <script>
            window.nextPage = '/examples/blog/page02.html';
          </script>

          <h1 class="content-subhead">Pinned Post</h1>

          <!-- A single blog post -->
          <section class="post">
            <header class="post-header">
              <img class="post-avatar" alt="Zeno Rocha's avatar" height="48" width="48" src="../common/img/zeno.jpg">

              <h2 class="post-title">Introducing Senna.js</h2>

              <p class="post-meta">
                By <a href="#" class="post-author">Zeno Rocha</a> under <a class="post-category post-category-design" href="#">SPA</a>
              </p>
            </header>

            <div class="post-description">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis omnis provident dolores praesentium eligendi accusantium voluptatum totam necessitatibus. Nisi asperiores molestiae ex, quaerat dolorum iure repellendus reprehenderit aliquid, minus libero rem aperiam fugit voluptatum. Esse, ex. Id aliquid culpa a.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis omnis provident dolores praesentium eligendi accusantium voluptatum totam necessitatibus. Nisi asperiores molestiae ex, quaerat dolorum iure repellendus reprehenderit aliquid, minus libero rem aperiam fugit voluptatum. Esse, ex. Id aliquid culpa a.
              </p>
            </div>
          </section>

          <section class="post">
            <header class="post-header">
              <img class="post-avatar" alt="Eduardo Lundgren's avatar" height="48" width="48" src="../common/img/dudu.jpg">

              <h2 class="post-title">What I learned at BrazilJS Conf</h2>

              <p class="post-meta">
                By <a class="post-author" href="#">Eduardo Lundgren</a> under <a class="post-category post-category-js" href="#">Events</a>
              </p>
            </header>

            <div class="post-description">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              </p>
            </div>
          </section>

          <section class="post">
            <header class="post-header">
              <img class="post-avatar" alt="Pedro Marques's avatar" height="48" width="48" src="../common/img/jamal.jpg">

              <h2 class="post-title">Slumdog Millionaire movie review</h2>

              <p class="post-meta">
                By <a class="post-author" href="#">Pedro Marques</a> under <a class="post-category post-category-pure" href="#">Movies</a>
              </p>
            </header>

            <div class="post-description">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              </p>
            </div>
          </section>

          <section class="post">
            <header class="post-header">
              <img class="post-avatar" alt="Henrique Vicente's avatar" height="48" width="48" src="../common/img/henvic.jpg">

              <h2 class="post-title">Kitties, kitties, kitties...</h2>

              <p class="post-meta">
                By <a class="post-author" href="#">Henrique Vicente</a> under <a class="post-category post-category-yui" href="#">Cute</a>
              </p>
            </header>

            <div class="post-description">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus eius ullam pariatur nemo provident quo vitae fugiat tempore, nam beatae, quisquam voluptatum aperiam sit ipsa culpa nulla hic autem! Deleniti, minus, deserunt? Adipisci architecto, dolorem.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus eius ullam pariatur nemo provident quo vitae fugiat tempore, nam beatae, quisquam voluptatum aperiam sit ipsa culpa nulla hic autem! Deleniti, minus, deserunt? Adipisci architecto, dolorem.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem minima architecto et necessitatibus cum ullam consequatur nisi itaque a obcaecati! Doloremque necessitatibus sed repudiandae qui consequatur culpa laudantium doloribus harum consectetur porro ipsa, quasi, quis, hic adipisci eius id perferendis!
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem minima architecto et necessitatibus cum ullam consequatur nisi itaque a obcaecati! Doloremque necessitatibus sed repudiandae qui consequatur culpa laudantium doloribus harum consectetur porro ipsa, quasi, quis, hic adipisci eius id perferendis!
              </p>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
